<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>${message("通知消息列表")}</title>
<link href="/resources/css/common.css" rel="stylesheet" type="text/css" />
<link href="/resources/css/zTreeStyle.css" rel="stylesheet" type="text/css">
<link href="/resources/css/layout.css" rel="stylesheet" type="text/css" />
<link href="/resources/css/mmGrid.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/resources/js/reference/jquery.js"></script>
<script type="text/javascript" src="/resources/js/base/dialog.js"></script>
<script type="text/javascript" src="/resources/js/reference/jquery.validate.js"></script>
<script type="text/javascript" src="/resources/js/base/request.js"></script>
<script type="text/javascript" src="/resources/js/base/global.js"></script>
<script type="text/javascript" src="/resources/js/reference/mmGrid.js"></script>
<script type="text/javascript" src="/resources/plugin/datePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/resources/js/reference/jquery.ztree.core-3.5.js"></script>
<!--地图-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=xzQ89rGL61tuBjTdlQCRRlShOQ9WLTNd"></script>
<script type="text/javascript" src="/resources/js/mapJs/map_baidu.js"></script>
<link href="/resources/js/mapJs/map_baidu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/resources/js/mapJs/DistanceTool_min.js"></script>
<style type="text/css">
div.floatDiv,.shownone {
	display: none;
}
.input-edit label {
	width: 100px;
	display: inline-block;
	margin-bottom: 5px;
}
#timerSpan {
	color: red;
}
#timerValue {
	font-size: 50px;
}
#timerDesc {
	font-size: 20px;
}
#sendForm div input.text {
	width: unset;
}
#sendForm div span {
	width: 150px;
	display: inline-block;
}
.heartbeat {
	margin: 5px 0;
}
div.tabContent{
	float:left;width:100%
}
.terminalInfo label, .BMap_bubble_title label {
    display: inline-block;
	width: 188px;
	margin-right: 10px;
}
</style>
</head>
<body class="tree-contain">

<script type="text/javascript">
$().ready(function() {
	var types= {1:'${message("手动开锁")}',2:'${message("手动解除报警")}'};
	var cols = [
		{ title:'${message("操作")}', align:'center', width:60, renderer:function(val,item){
			return '<input type="hidden" value="'+item.id+'"><a href="javascript:;" class="btn-edit" onClick="sendMessage('+item.type+',&quot;'+item.terminal_num+'&quot;,&quot;'+item.elock_num+'&quot;,'+item.id+')">下发</a>';
		}},
		{ title:'${message("终端设备编号")}', name:'terminal_num' ,align:'center',renderer:function(val,item,rowIndex){
			return '<a href="javascript:void(0);" onClick="showTab(1, &quot;'+item.terminal_num+'&quot;,'+item.latitude+','+item.longitude+')" class="red">'+val+'</a>';
// 			return val;
		}},
		{ title:'车辆信息' ,align: 'center', cols: [
			{ title:'${message("车牌号")}', name:'car_number' ,align:'center' },
			{ title:'${message("锁编号")}', name:'elock_num' ,align:'center' },
			{ title:'${message("舱位")}', name:'berth' ,align:'center' },
		]},
		{ title:'消息通知信息' ,align: 'center', cols: [
			{ title:'${message("消息类型")}', name:'type' ,align:'center' ,renderer:function(val,item){
				return types[val];
			}},
			{ title:'${message("消息内容")}', name:'content' ,width:310,align:'center' },
			{ title:'${message("报警信息")}', name:'warning_message' ,width:310,align:'center' },
			{ title:'${message("经度")}', name:'longitude' ,align:'center' },
			{ title:'${message("纬度")}', name:'latitude' ,align:'center', },
			{ title:'${message("备注")}', name:'remark' ,align:'center', },
			{ title:'${message("消息通知时间")}', name:'modify_date' ,align:'center',width:130 },
		]},
	];
	$mmGrid = $('#table-m1').mmGrid({
		autoLoad:true,
        cols: cols,
        fullWidthRows:true,
        url: 'select_list_data.jhtml',
        params:function(){
        	return $("#listForm").serializeObject();
        },
		plugins : [
            $('#paginator').mmPaginator()
        ]
    });
});

var isInit=0;
function showTab(type, terminalNum, latitude, longitude){
	$("#tab input").removeClass("current").eq(type).addClass("current");
	var $tabContent = $(".tabContent").hide();
	$tabContent.eq(type).show();
	$("#map").css("height",$(window).height()-38+"px");
	if(type==1){
		if (isInit==0) {
			//实例化地图
			//参数：初始化地图id,是否需要绘制区域,是否需要定位,是否需要大小按钮,是否需要搜索按钮
			bmap.init('map',false,false,true,true);
			isInit++;
		}
		if (terminalNum != null) {
			//清掉之前创建的标注
			bmap.map.clearOverlays();
			
			ajaxSubmit($(1),{
				method:'post',
				url:"/realtime_monitor/getRealtimePosition.jhtml",
				data: {terminalNum: terminalNum, type: 3},
				callback: function(data) {
					var item=data.objx;
					if (longitude!=null && latitude!=null){
						window.setTimeout(function(){
					 		setMarker(item, latitude, longitude);
							showRangeFences(latitude, longitude);
					 	}, 200);
					}
				}
			});
		}
	}
}

var preInfoWindow;
//设置覆盖物
function setMarker(item, latitude, longitude) {
	//跳转并显示自定义图标
	var pp = new BMap.Point(longitude, latitude);//里面的参数(经度、维度)  
	var iconSkin = item.is_online == 0 ? "terminal_offline" :"terminal_online";
	var myIcon = new BMap.Icon("/resources/images/"+iconSkin+"_map.png", new BMap.Size(30,30),{imageSize:new BMap.Size(30,30)});
	var marker = new BMap.Marker(pp,{icon:myIcon});
	bmap.map.addOverlay(marker);//添加标注
	bmap.map.centerAndZoom(pp, 18);//18，是地图显示放大缩小等级，越大越具体
	var title = "";
	var vol = "";
	var fence = "";
	var fences = "";
	var height = 190;
	var width = 400;
	if (item.elock_num!=null) {
		title = "<b>" + "锁号："+ item.elock_num + "</b>";
	}
	else if (item.terminal_num!=null) {
		var isOnline = item.is_online==1?"是":"否";
		var version = item.version == null ?"":item.version;
		title = "<label><b>" + "终端设备编号："+ item.terminal_num + "</b></label><label><b>版本号："+version+"&nbsp;&nbsp;&nbsp;&nbsp;在线："+isOnline+"</b></label>";
		vol = "<label>电压：" + item.vol + "</label>";
		fence = '<br><a class="red" href="/realtime_monitor/track_history.jhtml?terminalNum='+item.terminal_num+'" target="_blank">轨迹回放</a>';
		height = 190;
	}
	var info = "<div class='terminalInfo' style='text-align:left;line-height:2; height:"+height+"px; width:"+width+"px;border-top: solid 2px #02aae9;'>";
	info += "<label>基站定位数据：" + item.jzdw + "</label>";
	info += "<label>GPS时间：" + item.gps_time + "</label>";
	info += vol;
	info += "<label>速度：" + item.speed + "</label>";
	info += "<label>方向：" + item.direction + "</label>";
	info += "<label>海拔高度：" + item.altitude + "</label>";
	if (item.terminal_num!=null) {
		info += "<br>SIM卡号：" + item.sim;
	}
	info += "<br>状态信息：" + item.status_desc;
	info += fence;
	info += "</div>";
	var opts = {
	  width : width,     // 信息窗口宽度
	  height: height,     // 信息窗口高度
	  offset: new BMap.Size(0, 0),
	  title : title , // 信息窗口标题
	  enableMessage:true//设置允许信息窗发送短息
	}
	var infoWindow = new BMap.InfoWindow(info, opts);  // 创建信息窗口对象 
	bmap.map.openInfoWindow(infoWindow,pp); //开启信息窗口
	marker.addEventListener("click", function(){          
		bmap.map.openInfoWindow(infoWindow,pp); //开启信息窗口
	});
	preInfoWindow = infoWindow;
}

function showRangeFences(latitude, longitude) {
	ajaxSubmit($(1),{
		method:'post',
		url:"/electronic_fence/getRangeFences.jhtml",
		data: {latitude: latitude, longitude: longitude, distance: 3000},
		callback: function(data) {
			var fences = data.objx;
			if (fences != null && fences.length > 0) {
				var parm = {
					strokeColor : "red", //边线颜色。
					fillColor : "red", //填充颜色。当参数为空时，圆形将没有填充效果。
					strokeWeight : 3, //边线的宽度，以像素为单位。
					strokeOpacity : 0.8, //边线透明度，取值范围0 - 1。
					fillOpacity : 0.3, //填充的透明度，取值范围0 - 1。
					strokeStyle : 'solid' //边线的样式，solid或dashed。
				};
				for (var i = 0; i < fences.length; i++) {
					var fence = fences[i];
					var mk;
					if (fence.type == 0) {
						mk = new BMap.Circle(new BMap.Point(fence.longitude,fence.latitude), fence.radius, parm);
					} else {
						var points = fence.points;
						var pointsArray=points.split(",");
						var newarray = [];
					    for(var n=0;n<pointsArray.length;n+=2) {
					        newarray.push(new BMap.Point(pointsArray[n+1],pointsArray[n]));
					    }
					    mk = new BMap.Polygon(newarray, parm);
					}
					bmap.map.addOverlay(mk);

					var point = mk.getBounds().getCenter();
					var label = new BMap.Label(fence.name + "<br>(" + fence.sale_org_name + ")", {position : point, offset:new BMap.Size(0,0)});
					label.setStyle({fontFamily:"微软雅黑"});
					bmap.map.addOverlay(label);
				}
			}
		}
	});
}

function sendMessage(msgType, terminalNum, elockNo, notifyId){

	var type = 34560; //0x8700
	var content = msgType == 1? 12 : 13;
	var contentDesc = msgType == 1? "手动开锁" : "手动解除报警";
	var h = "350";
	var content = '<form id="sendForm"><table class="input input-edit" style="width:100%">'
				+'<tbody>'
				+'<tr><th>终端设备：</th><td colspan="2">'+terminalNum+'<input type="hidden" name="terminalNum" value="'+terminalNum+'">'
				+'<input type="hidden" name="type" value="'+type+'"><input type="hidden" name="elockNo" value="'+elockNo+'"></td></tr>'
				+'<tr><th style="height:70px">下发内容：</th><td colspan="2"><div class="heartbeat"><span>类型：</span>'
				+'<input type="hidden" name="content" value="'+content+'"/>'+contentDesc+'</div>'
				+'<div class="heartbeat"><span>任务单编号：</span><input type="text" class="text" name="waybillNo"/></div></td></tr>'
				+ '<tr><th>执行情况：</th><td><div id="sendText" style="height:160px;"><div></td>'
				+'<td style="width:60px;"><div id="timerSpan" style="display:none;"><div id="timerDesc">计时：</div><div id="timerValue" style="text-align: center;">0</div></div></td></tr>'
				+'</tbody></table></form>';

	var $dialog_check = $.dialog({
		title:"平台控制电子锁命令",
		height: h,
		width:'600',
		content: content,
		ok: "发送",
		cancel: "关闭",
		onOk:function(){
 			if (!$(".cancleButton").hasClass("shownone")) {
 				$(".cancleButton").addClass("shownone");
 			}
 			if (!$(".sureButton").hasClass("shownone")) {
 				$(".sureButton").addClass("shownone");
 			}
			$.ajax({
				url: "/realtime_monitor/send_msg.jhtml",
				type: "POST",
				data: $("#sendForm").serialize(),
				dataType: "json",
				cache: false,
				async:false, 
				success: function(data) {
					if (data.type == "error") {
						$.message_alert(data.content);
						if ($(".cancleButton").hasClass("shownone")) {
				 			$(".cancleButton").removeClass("shownone");
				 		}
				 		if ($(".sureButton").hasClass("shownone")) {
				 			$(".sureButton").removeClass("shownone");
				 		}
						return false;
					}
					$("input[type='radio']").attr("disabled",true); 
					$("input[type='text']").attr("readonly",true);
					$("#sendText").empty();
					$("#sendText").append("<div>平台发送数据中.........</div>");
					var messageSendId = data.objx;
					var sendSuccess = false;
					var replySuccess = false;
					var timerSign = 0;
					var sendT;
					var replyT;
					var timer = window.setInterval(function() {
						if (timerSign == 0) {
							sendT = showTimer(timer, 12, 0);
						}
						timerSign++;

						$.ajax({
							url: "/realtime_monitor/get_message_send.jhtml",
							type: "POST",
							data: {id : messageSendId},
							dataType: "json",
							cache: false,
							async:false, 
							success: function(data) {
								var item = data.objx;
								if (!sendSuccess && item.send_result > 0) {
									sendSuccess = true;
									if (item.send_result == 1) {
										$("#sendText").append("<div style='color:greed;'>发送成功：" + item.send_message + "</div>");
										window.clearInterval(sendT);
										replyT = showTimer(timer, 12, 1);
										$("#sendText").append("<br><div>平台等待接收终端回复数据............</div>");
									} else if (item.send_result == 2) {
										$("#sendText").append("<div style='color:red;'>发送异常：" + item.send_message + "</div>");
										$("#timerSpan").hide();
										window.clearInterval(sendT);
										window.clearInterval(timer);
										setElementStatus(true);
										return false;
									}
								}
								if (!replySuccess && item.reply_result == 1) {
									$("#sendText").append("<div style='color:greed;'>终端回复：" + item.reply_message + "</div>");
									replySuccess = true;

									$("#timerSpan").hide();
									window.clearInterval(replyT);
									window.clearInterval(timer);
									setElementStatus(true);

									var processResult = item.reply_message==null?null:"'"+item.reply_message+"'";
									ajaxSubmit($(1),{
										method:'post',
										url:"/terminal_notify_message/updateProcessResult.jhtml",
										data: {ids: notifyId, processResult: processResult},
										callback: function(data) {
											
										}
									});

									return false;
								}
							}
						});
					}, 1000);
				}
			});
			return false;
		}
	});
	var h = 80;
	$dialog_check.css("top",h+"px");
	$(".dialogClose").addClass("shownone");
}

function showTimer(timer, time, type) {

	var c = 1;
	$("#timerValue").text(c);
	$("#timerSpan").show();
	var t = window.setInterval(function() {
		$("#timerValue").text(c);
		c++;
		if (c >= time) {
			window.clearInterval(t);
			window.clearInterval(timer);
			$("#timerSpan").hide();
			var txt = type == 0 ? '<div style="color:red;">发送异常：下发数据超时，点击"发送"按钮可重试</div>' : '<div  style="color:red;">接收异常：平台接收终端回复数据超时，点击"发送"按钮可重试</div>';
			$("#sendText").append(txt);
			setElementStatus(true);
			return false;
		}
	}, 1000);
	return t;
}

function setElementStatus(isShow) {

	if (isShow) {
		$("input[type='radio']").attr("disabled",false); 
		$("input[type='text']").attr("readonly",false);
		if ($(".cancleButton").hasClass("shownone")) {
 			$(".cancleButton").removeClass("shownone");
 		}
 		if ($(".sureButton").hasClass("shownone")) {
 			$(".sureButton").removeClass("shownone");
 		}
	} else {
 		$("input[type='radio']").attr("disabled",true); 
 		$("input[type='text']").attr("readonly",true);
 		if (!$(".cancleButton").hasClass("shownone")) {
 			$(".cancleButton").addClass("shownone");
 		}
 		if ($(".sureButton").hasClass("shownone")) {
 			$(".sureButton").removeClass("shownone");
 		}
	}
}
</script>
</head>
<body>
	<form id="listForm" action="list.jhtml" method="get">
	<input type="hidden" id="flag" name="flag" value="1" />
	
	<div style="width:100%; float: left;" id="bottomDiv">
		<ul id="tab" class="tab tab-first">
		 	<li>
	            <input type="button" class="current" value="${message("列表")}" onclick="showTab(0)">
	        </li>
  			<li>
	            <input type="button" value="${message("地图")}" onclick="showTab(1)">
	        </li>
	    </ul>
	    
	    <div class="tabContent needRealtimePosition" >
	    	<div class="bar" style="margin-top:5px;">
				<div class="buttonWrap">
				</div>
				<div class="search-btn">
					<a href="javascript:;" id="searchBtn" class="iconButton">${message("1004")}</a>
				</div>
				<div id="searchDiv">
					 <div id="search-content" >
		        		<dl>
		    				<dt ><p>终端设备编号:</p></dt>
			    			<dd >
			    				<input type="text" class="text" id="sn" name="terminalNum"  btn-fun="clear"/>
			    			</dd>
			    		</dl>
			    		<dl>
		    				<dt ><p>锁编号:</p></dt>
			    			<dd >
			    				<input type="text" class="text" id="sn" name="elockNum"  btn-fun="clear"/>
			    			</dd>
			    		</dl>
		        	</div>
				</div>
			</div>
			<!--</div>-->
			<div class="table-responsive">
				<table id="table-m1"></table>
		    	<div id="body-paginator" style="text-align:left;">
		    		<div id="paginator"></div>
		   		</div>
			</div>
		</div>
			
		<div class="tabContent needRealtimePosition" style="display:none;" >
			<div id="map" style="height:450px;width:100%;">
			</div>
			<input id="search" type="text" class="searchbox-content-common" style="top:45px"/>
			<input type="button" id="" class="searchbox-content-common search_map button" onClick="search_key()" style="top:45px"/>
			<div id="searchResultPanel" class="searchResultPanel" style="top:45px"></div>
			
			<div class="ui3-control-wrap">
			<div class="left float-l" style="top:45px"> 
			   <div class="trafficopt map" map-on-click="traffic"> 
			   		<ul>
				    <span class="span_map_type"></span>
				    <i>地图类型</i> 
				    </ul>
			   <div class="hidden-box-map" style="display:none;">
			    	<ul> 
				    	<span class="span_map1"></span>
					    <i style="color: #579AFC" onClick="bmap.changeMapType(BMAP_NORMAL_MAP);">平面地图</i> 
				  	</ul> 
				  	<ul> 
				    	<span class="span_map2"></span>
					    <i onClick="bmap.changeMapType(BMAP_HYBRID_MAP);">卫星地图</i> 
				  	</ul> 
				</div>
			   </div> 
			    <b></b>
			   <div class="trafficopt tool" map-on-click="traffic"> 
			   		<ul>
				    <span class="span_map_tool"></span>
				    <i>工具箱</i> 
				    </ul>
			   <div class="hidden-box-tool" style="display:none;">
				  	<ul> 
				    	<span class="span_map_ruler"></span>
					    <i onClick="bmap.opanRanging();">测距</i> 
				  	</ul> 
				</div>
			   </div>
			     <b></b>
			    
		  </div>
		  </div>
		</div>
	</div>	
	</form>
</body>
<script type="text/javascript">
/**
 * 实例化地图
 * 
 * 初始化地图id
 * 是否需要绘制区域
 * 是否需要定位
 * 是否需要大小按钮
 * 是否需要搜索按钮
 */
bmap.init('map',false,false,true,true);
</script>
</html>